<template>
  <div class="store-warp">
    <van-search
      v-model="searchKey"
      placeholder="搜索你想要的"
      shape="round"
      :input-align="'center'"
      @search="onSearch"
    >
    </van-search>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-swipe :autoplay="3000" indicator-color="white" class="swipe-xl">
        <van-swipe-item
          v-for="item in swipe.url"
          :key="item"
          class="swipe swipe-xl"
        >
          <img :src="item" />
        </van-swipe-item>
      </van-swipe>
      <div class="stote-plank bg-white">
        <div class="stote-plank-header">
          <span class="fs-xl">精选</span>
          <p class="fs-x op5">H o T S A L E</p>
        </div>
        <div class="stote-plank-container">
          <across>
            <div
              slot
              class="goods shadow dib"
              v-for="(item, index) in featuredData"
              :key="index"
              @click="getGoods(item)"
            >
              <div class="avarat">
                <img :src="item.avatar" />
              </div>
              <div class="info">
                <p class="title van-multi-ellipsis--l2">{{ item.title }}</p>
                <span class="text-money">{{ item.price | money }}</span>
                <span>{{ item.original_price | money }}</span>
              </div>
            </div>
          </across>
          <!-- <div
          class="goods shadow dib"
          v-for="(item, index) in featuredData"
          :key="index"
        >
          <div class="avarat">
            <img :src="item.avatar" />
          </div>
          <div class="info">
            <p class="title van-multi-ellipsis--l2">{{ item.title }}</p>
            <span class="text-money">{{ item.price | money }}</span>
            <span>{{ item.original_price | money }}</span>
          </div>
        </div> -->
        </div>
      </div>
      <div class="stote-plank bg-white">
        <div class="stote-plank-header">
          <span class="fs-xl">附近商家</span>
          <p class="fs-x op5">H o T S A L E</p>
        </div>
        <div class="store-list">
          <div
            class="store-list-item shadow"
            v-for="(item, index) in storeData"
            :key="index"
          >
            <van-row>
              <van-col span="5">
                <van-image
                  width="70"
                  height="70"
                  lazy-load
                  :src="item.avatar"
                  style="border-radius: 4px;overflow: hidden;"
                />
              </van-col>
              <van-col span="19">
                <p class="fs-l p-t-xs">{{ item.title }}</p>
                <van-row type="flex" justify="space-between" class="m-t-xxl">
                  <van-col span="14"
                    ><van-icon
                      name="star-o"
                      style="background-color:rgb(255, 210, 30)"
                    />
                    4.0 分 <span class="op5">月售 : 33</span></van-col
                  >
                  <van-col span="10">
                    <p class="text-white">
                      <van-tag type="warning">到店自提</van-tag>
                      &nbsp;
                      <van-tag type="warning">准时达</van-tag>
                    </p>
                    <p class="op5">44.0km 3.0km</p>
                  </van-col>
                </van-row>
                <p class="op5">起送 {{ 0 | money }} | 配送费 {{ 0 | money }}</p>
              </van-col>
            </van-row>
          </div>
        </div>
      </div>
    </van-pull-refresh>
  </div>
</template>
<script>
import across from "@/common/across";
import { storeIndexHot, storeIndexList } from "@/api";
export default {
  name: "store",
  data() {
    return {
      searchKey: null,
      swipe: {
        url: [
          "https://img.zcool.cn/community/01dec15bd6d796a801213deafc13b3.jpg@375w_1l_0o_100sh.jpg",
          "https://img.zcool.cn/community/0122475bd6d7cfa801213deadec900.jpg@375w_1l_0o_100sh.jpg",
          "https://img.zcool.cn/community/01e4a65bd6d7d1a801213dea52b6eb.jpg@375w_1l_0o_100sh.jpg",
          "https://img.zcool.cn/community/01798a5bd6d796a8012099c86c4bcf.jpg@375w_1l_0o_100sh.jpg",
          "https://img.zcool.cn/community/0134bc5d1225a8a8012155295bb109.jpg@375w_1l_0o_100sh.jpg"
        ]
      },
      isLoading: false,
      featuredData: null,
      storeData: null
    };
  },
  components: {
    across
  },
  created() {
    this.getHotData();
    this.getStoreData();
  },
  methods: {
    onRefresh() {
      this.getHotData();
      this.getStoreData();
    },
    getHotData() {
      storeIndexHot()
        .then(res => {
          this.featuredData = res.data.data;
        })
        .catch(err => {
          console.log(err);
        });
    },
    getStoreData() {
      storeIndexList()
        .then(res => {
          this.storeData = res.data.data;
          this.isLoading = false;
        })
        .catch(err => {
          console.log(err);
        });
    },
    getGoods(item) {
      this.$router.push({
        name: "product",
        params: { store_id: item.store_id, id: item.id }
      });
    },
    onSearch() {}
  }
};
</script>
<style lang="scss" scoped>
.store-warp {
  .stote-plank {
    .stote-plank-header {
      padding: 0.7692 * $size;
      text-align: center;
      span {
        position: relative;
        &::before {
          content: "";
          position: absolute;
          top: 50%;
          left: -2.3077 * $size;
          transform: translate(0, -50%);
          width: 2 * $size;
          height: 0.3846 * $size;
          line-height: 0.3846 * $size;
          font-size: 2.3077 * $size;
          background: slateblue;
          opacity: 0.5;
        }
        &::after {
          content: "";
          position: absolute;
          top: 50%;
          right: -2.3077 * $size;
          transform: translate(0, -50%);
          width: 2 * $size;
          height: 0.3846 * $size;
          line-height: 0.3846 * $size;
          font-size: 2.3077 * $size;
          background: slateblue;
          opacity: 0.5;
        }
      }
    }
    .store-list {
      padding: 0.3077 * $size 0.7692 * $size;
      .store-list-item {
        margin: 0.25rem 0;
      }
    }
  }
  .goods {
    padding: 0.7692 * $size;
    margin: 0 0.7692 * $size;
    .avarat {
      width: 11.5385 * $size;
      max-height: 11.5385 * $size;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .info {
      .title {
        padding: 0.25rem 0;
      }
    }
  }
}
</style>
